<!--
 * @Date: 2025-07-09 17:26:27
 * @LastEditTime: 2025-07-11 15:35:58
-->
<template>
  <div class="details-migration">
    <!-- 基础信息 -->
    <a-card class="base-info-card" :bordered="false">
      <div class="base-info-row">
        <div class="base-info-col">
          <div><span class="label">任务名称：</span><span>{{ flowInfo.flowName || '-' }}</span></div>
          <div><span class="label">应用评估任务：</span><span>{{ flowInfo.collectFlowNme || '-' }}</span></div>
          <div><span class="label">目标数据库：</span><span>{{ flowInfo.dbType || '-' }}</span></div>
        </div>
        <div class="base-info-col">
          <div><span class="label">任务描述：</span><span>{{ flowInfo.taskDesc || '-' }}</span></div>
          <div><span class="label">用户组：</span><span>{{ flowInfo.groupName || '-' }}</span></div>
          <div><span class="label">程序执行节点：</span><span>{{ flowInfo.address || '-' }}</span></div>
        </div>
      </div>
    </a-card>

    <!-- 迁移文件区 -->
    <a-card class="file-section" :bordered="false" style="margin-top: 16px;">
      <div class="file-section-row">
        <div class="dev-transfer-box">
          <a-transfer
          :disabled="true"
            v-model:target-keys="targetKeys"
            :data-source="mapping"
            :titles="['可选项', '已选项']"
            :render="item => item.operateResources"
             @change="handleChange"
            :list-style="{ width: '400px', height: '400px' }"
          />
        </div>
      </div>
    </a-card>

    <!-- 饼图区 -->
    <a-row class="charts-row">
        <a-col :span="12">
          <div class="chart-title">转换状态</div>
          <div ref="convertPieRef" class="chart-echarts"></div>
    </a-col>
    <a-col :span="12">
      <div class="chart-title">迁移状态</div>
      <div ref="migratePieRef" class="chart-echarts"></div>
    </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import * as http from '@/api/flow/createTask';
import store from "@/store";

const mapping = ref([])
const targetKeys = ref([]);
const handleChange = (targetKeys, direction, moveKeys) => {
  console.log(targetKeys, direction, moveKeys);
  targetKeys.value = targetKeys
  mapping.value.forEach(item => {
    if(targetKeys.includes(item.operateResources)){
      item.isSelect = 1
    }else{
      item.isSelect = 0
    }
  })
};
// 饼图数据
const convertStatusData = ref([])
const migrateStatusData = ref([])
const convertPieRef = ref(null)
const migratePieRef = ref(null)
let convertPieChart = null
let migratePieChart = null

function renderPie(refDom, data, title) {
  if (!refDom) return
  const chart = echarts.init(refDom)
  chart.setOption({
    color: ['#1890ff', '#13c2c2', '#faad14', '#52c41a', '#f5222d'], // Ant Design主色系
    tooltip: { trigger: 'item' },
    legend: {
      top: 'bottom',
      left: 'center',
      orient: 'horizontal',
      textStyle: { fontSize: 14 },
      padding: [20, 0, 0, 0]
    },
    series: [
      {
        name: title,
        type: 'pie',
        radius: '70%', // 普通饼图
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {d}%',
          fontSize: 15
        },
        labelLine: {
          length: 18,
          length2: 10
        },
        data
      }
    ]
  })
  return chart
}

onMounted(() => {
  convertPieChart = renderPie(convertPieRef.value, convertStatusData.value, '转换状态')
  migratePieChart = renderPie(migratePieRef.value, migrateStatusData.value  , '迁移状态')
  objectMessageView()
  objectPieView()
})

// 如果数据后续会变动，可加watch自动更新
watch(convertStatusData, (val) => {
  if (convertPieChart) convertPieChart.setOption({ series: [{ data: val }] })
})
watch(migrateStatusData, (val) => {
  if (migratePieChart) migratePieChart.setOption({ series: [{ data: val }] })
})
const flowInfo = ref({})
const objectMessageView = async () => {
  let params = {
     flowId:1751856414019,
  // flowId: store.state.taskInfo.selectMigrationFlow.flowId,
  }
  const res = await http.objectMessageView(params)
  console.log(res)
  try{
    if(res.code === '000000'){
      flowInfo.value = res.data
      mapping.value = res.data.mapping;
      mapping.value.forEach(item => {
       item.key = item.operateResources
      })
    }
  }catch(err){
    console.log(err)
  }
}
const objectPieView = async () => {
  let params = {
     flowId:1751856414019,
  // flowId: store.state.taskInfo.selectMigrationFlow.flowId,
  }
  const res = await http.objectPieView(params)
  console.log(res)
  try{
    if(res.code === '000000'){
      convertStatusData.value = res.data.switch
      migrateStatusData.value = res.data.mig
    }
  }catch(err){
    console.log(err)
  }
}
</script>

<style scoped>
.details-migration {
  padding: 32px 0 24px 0;
  width: 90%;
  margin: 0 auto;
}
.base-info-card {
  margin-bottom: 20px;
}
.base-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 80px;
  font-size: 15px;
}
.base-info-col {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 18px 0;
}
.label {
  color: #aaa;
  margin-right: 6px;
  font-weight: 500;
}
.file-section {
  min-height: 140px;
  margin-bottom: 24px;
  background: #fafbfc;
}
.file-section-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: flex-start;
}
.file-list-col {
  flex: 1;
  min-width: 260px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  padding: 16px 18px 18px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.file-list-title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 10px;
  color: #333;
}
.file-list-content {
  min-height: 60px;
  color: #bbb;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.chart-card {
  flex: 1;
  min-width: 380px;
  min-height: 300px;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.chart-title {
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 18px;
}
.chart-echarts {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  display: block;
}
</style>